<template>
	<view class="page-box">
		<view class="pad-30">
			<view class="bg-white pad-30 radius30">
				<view class="form-item flex color-text">
					<view class="font-26 form-title">预定时间</view>
					<view class="flex-w font-26 flex time-block">
						<view class="item-box centerXY time-ymd" @click="showTime = true">
							<view class="mar-right-15">
								{{monthDay}}
								<text>{{timeText}}</text>
								{{hourVal}}:00
							</view>
							<up-icon size="14" color="#ABA9B4" name="arrow-down"></up-icon>
						</view>
						<!-- <view class="mar-left-15 mar-right-15">至</view>
						<view class="item-box time-grey">21:00</view> -->
					</view>
				</view>
				<!-- <view class="form-item flex color-text">
					<view class="form-title font-26">计费规则</view>
					<view class="font-26 flex-w">
						<view class="time-block">
							<text class="color-error">14.5元/60</text>分钟，起订时间<text class="color-error">4</text>小时
						</view>
					</view>
				</view>
				<view class="form-item flex color-text">
					<view class="form-title font-26">推荐时长</view>
					<view class="font-26 flex-w">
						<view :class="isOn == 1 ? 'on':''" class="time-list mar-bottom-20">4小时</view>
						<view :class="isOn == 2 ? 'on':''" class="time-list mar-bottom-20">6小时</view>
						<view :class="isOn == 3 ? 'on':''" class="time-list mar-bottom-20">8小时</view>
					</view>
				</view> -->

				<!-- 显示今明两天被预约的 -->
				<!-- <view class="centerY">
					<view class="centerY font-26">
						<view class="selected mar-right-10"></view>不可选
					</view>
					<view class="centerY font-26 mar-left-40">
						<view class="unselected mar-right-10"></view>可选
					</view>
				</view>
				<view class="mar-top-30 font-26">
					<view>9-30</view>
					<view class="mar-top-10 flex">
						<view class="mar-right-5" v-for="(item,index) in 24">
							<view class="selected"></view>
							<view class="font-22">{{index}}</view>
						</view>
					</view>
					<view class="mar-top-30">次日</view>
					<view class="mar-top-10 flex">
						<view class="mar-right-5" v-for="(item,index) in 24">
							<view class="selectedGrey"></view>
							<view class="font-22">{{index}}</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<up-picker @cancel="showTime = false" :show="showTime" ref="uPickerRef" :columns="column" @confirm="confirm"
			@change="changeHandler"></up-picker>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		ref,
		reactive
	} from 'vue';

	const isOn = ref(1);

	const monthDay = ref("9-30");
	const hourVal = ref('17');
	// const host
	// 获取当前日期
	const now = dayjs();
	// 获取当前年
	const currentYear = now.year();
	// 获取当前月
	const currentMonth = now.month() + 1; // month() 返回值为 0-11，所以需要 +1
	// 获取当前月份的最后一天
	const endOfMonth = now.endOf('month');
	// 获取今天结束的时间
	const endOfDay = now.endOf('day');
	// 创建一个数组来存储剩余的小时
	const remainingHoursArray = [];
	// 计算从当前小时到结束时间的每个小时
	for (let hour = now.hour(); hour <= 23; hour++) {
		const hourMoment = now.set('hour', hour).startOf('hour'); // 设置为当前小时，并清除分钟和秒
		remainingHoursArray.push(hourMoment.format('HH')); // 根据需要格式化日期
	}

	// 天数数组
	const remainingDaysArray = [];
	for (let day = now; day.isBefore(endOfMonth) || day.isSame(endOfMonth); day = day.add(1, 'day')) {
		remainingDaysArray.push(day.format('DD')); // 可以根据需要格式化日期
	}

	// 获取时间是否是今天还是明天
	const timeText = ref('');
	const dateToCheck = (date) => {
		// 今天
		let today = dayjs(date).isSame(dayjs(), 'day');
		// 明天的时间
		let tomorrow = dayjs(date).isSame(dayjs().add(1, 'day'), 'day');

		if (today) {
			return "（今天）"
		} else if (tomorrow) {
			return "（明天）"
		}
	}

	timeText.value = dateToCheck('2024-10-04');


	const showTime = ref(false);
	// 初始数据
	const column = reactive([
		[`${currentYear}`],
		[`${currentMonth}`, `${currentMonth+1}`],
		remainingDaysArray,
		remainingHoursArray
	]);

	// 日期返回值
	const dayArray = reactive([
		remainingDaysArray,
		['01', '02'],
	]);

	// 小时返回
	const hourArray = reactive([
		remainingHoursArray,
		['1', '2'],
		['2', '3', '4', '5'],
		['4', '5', '6', '7'],
	])

	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values,
			index,
		} = e;

		// 切换月
		if (columnIndex == 1) {
			uPickerRef.value.setColumnValues(2, dayArray[index]);
		}

		// 切换天
		if (columnIndex == 2) {
			uPickerRef.value.setColumnValues(3, hourArray[index]);
		}
	};

	const confirm = (e) => {
		monthDay.value = `${e.value[1]}-${e.value[2]}`;
		hourVal.value = e.value[3];
		showTime.value = false;
	};
</script>

<style scoped>
	.form-title {
		width: 130rpx;
		line-height: 70rpx;
	}

	.time-grey {
		background: #E8E8E8;
	}

	.time-ymd {
		width: 300rpx;
		text-align: center;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.time-list {
		height: 70rpx;
		border-radius: 10rpx;
		border: 1px solid #E8E8E8;
		text-align: center;
		line-height: 70rpx;
	}

	.on {
		background: rgba(0, 85, 254, 0.07);
		border: 1rpx solid #0055FE;
	}

	.time-block {
		height: 70rpx;
		line-height: 70rpx;
	}

	.item-box {
		border: 1px solid #E8E8E8;
		padding: 0 16rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.selected {
		width: 20rpx;
		height: 20rpx;
		background: #0055FE;
	}

	.unselected {
		width: 20rpx;
		height: 20rpx;
		border: 2rpx solid #DFE1E4;
		box-sizing: border-box;
	}

	.selectedGrey {
		width: 20rpx;
		height: 20rpx;
		background: #E8E8E8;
	}
</style>